<script lang="ts" setup>
import axios from 'axios';
import { ref, watch } from 'vue';
import { TResponse, TArticleItem } from '../types/data';
import userChannelStore from '../store/channel'
// !#1
const channelStore = userChannelStore()

const articles = ref<TArticleItem[]>([])

const getArticleListByChannelId = async (channelId: number) => {
  const r = await axios.get<TResponse<{
    pre_timestamp: string;
    results: TArticleItem[]
  }>>(`http://geek.itheima.net/v1_0/articles?channel_id=${channelId}&timestamp=${Date.now()}`)
  articles.value = r.data.data.results
}
// !#2
watch(() => channelStore.channelId, (newChannelId) => {
  getArticleListByChannelId(newChannelId)
})

</script>

<template>
  <div className="list">
    <div className="article_item" v-for="item in articles" :key="item.art_id">
      <h3 className="van-ellipsis">{{item.title}}</h3>
      <div className="img_box">
        <img v-if="item.cover.type !== 0" :src="item.cover.images![0]" className="w100" alt="" />
      </div>
      <div className="info_box">
        <span>{{item.aut_id}}</span>
        <span>{{item.comm_count}}评论</span>
        <span>{{item.pubdate}}</span>
      </div>
    </div>
  </div>
</template>

<style scoed lang="less">

</style>